<template>
  <el-dialog
    v-el-drag-dialog
    :title="'选择客户'"
    :visible.sync="visible"
    width="1024px"
    append-to-body
    @closed="reset"
  >
    <el-table-form ref="form" :max-cols="4" :model="query">
      <el-form-item class="merge-item">
        <el-select v-model.trim="query.type" style="width: 170px; margin-right: 2px;">
          <el-option value="csmRgPhone" label="电话">电话</el-option>
          <el-option value="csmCode" label="客户编号">客户编号</el-option>
          <el-option value="csmName" label="客户名称">客户名称</el-option>
          <el-option value="csmRgAddress" label="地址">地址</el-option>
          <el-option value="remark" label="备注">备注</el-option>
        </el-select>
        <el-input v-model.trim="query.csmText" placeholder="请输入" clearable @keyup.enter.native="search" />
      </el-form-item>
      <el-form-item label="客户类型:" class="merge-item">
        <el-select v-model="query.csmType" clearable style="width: 100%;">
          <el-option v-for="(l,i) in cmsType" :key="i" :value="l.value" :label="l.desc" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属机构:" prop="orgSNNo">
        <el-tree-select
          v-model="query.orgSNNo"
          :clearable="true"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择组织机构',
            loading: $loadingPlugin.getTreeData
          }"
          :tree-params=" {
            'expand-on-click-node': false,
            'highlight-current': true,
            'filterable': true,
            props:{
              value:'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData
          }"
          @node-click="selectTreeChange"
        />
      </el-form-item>

      <template v-slot:btns>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </template>
    </el-table-form>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      class="tableOrder"
      highlight-current-row
      max-height="400"
      border
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      :pagination="true"
      :total="tableData.total"
      @fetch="fetchData"
      @selection-change="handleSelectionChange"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.success || $loadingPlugin.edit" type="primary" @click="success">
        确定
      </el-button>
    </div>
    <Confirmation ref="Confirmation" />
  </el-dialog>
</template>

<script>
  import getTreeData from '@/utils/jsonTree'
  import { csmManageQueryList } from '@/api'
  import { mapGetters } from 'vuex'
  export default {
    name: 'tableUsers',
    components: {
      Confirmation: require('./Confirmation.vue').default
    },
    props: {
      cmsType: {
        type: Array,
        default: []
      }
      // selectedTable: {
      //   type: Array,
      //   default: []
      // }
    },

    data() {
      return {
        visible: false,
        type: 'add',
        priceTypeDetail: {},
        checkList: [],
        query: { type: 'csmRgPhone' },
        treeData: [],
        tableData: {
          column: [
            { type: 'index' },
            { type: 'selection' },
            { label: '客户编号', prop: 'csmCode', width: 90, align: 'center' },
            { label: '名称', prop: 'csmName', width: 120, align: 'center' },
            { label: '客户类型', prop: 'csmType', width: 80, align: 'center', formatter: this.csmTypeFormat },
            { label: '电话', prop: 'csmRgPhone', width: 120, align: 'center' },
            { label: '所属机构', prop: 'nearStationName', width: 120, align: 'center' },
            { label: '地址', prop: 'csmRgAddress', width: '', align: 'left' },
            { label: '备注', prop: 'remark', width: '', align: 'left' }
          ],
          data: []
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await this.getTreeData()
    },

    methods: {
      // 获取所属机构数据
      async getTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择所属机构
      selectTreeChange(value) {
        this.orgSNNo = value.orgSNNo
      },
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          'csmStatus': 2, 'csmType': this.query.csmType,
          'priceCgID': this.priceTypeDetail.priceCgId, 'orgSNNo': this.query.orgSNNo, 'phoneStatus': 2,
          currentPage,
          pageSize
        }
        params[this.query.type] = this.query.csmText
        const res = await csmManageQueryList(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      csmTypeFormat: function(row, column) {
        const val = row[column.property]
        if (this.cmsType.find(l => l.value === val)) {
          return this.cmsType.find(l => l.value === val).desc || ''
        }
        return ''
      },
      search() {
        this.fetchData({})
      },
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.priceTypeDetail = { ...temp }
            console.log(this.priceTypeDetail)
            // this.temp = Object.assign(this.temp, temp)
            // this.type = 'edit'
          }
          this.fetchData({})
        })
      },
      success() {
        const rows = this.checkList
        if (rows.length === 0) {
          this.$message.error('请选择客户')
          return
        }
        this.$refs.Confirmation.open({ csmList: rows, priceTypeDetail: this.priceTypeDetail })
        this.visible = false
      },
      handleSelectionChange(val) {
        this.checkList = val
        console.log(val)
      },
      reset() {
        this.type = 'add'
        // this.temp = {
        //   select: 1,
        //   csmPhone: '',
        //   orderCode: '',
        //   csmName: '',
        //   address: '',
        //   addScores: '',
        //   price: '',
        //   time: '',
        //   remark: ''
        // }
        this.query = { type: 'csmRgPhone' }
        this.tableData.data = []
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 50%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.goodsForm {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 40%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
}
</style>
